<template>
  <div class="passwordManagement p-[30px] rounded-[8px]">
    <div class="flex justify-between">
      <span class="font-bold">修改密码</span
      ><span class="name"
        ><van-icon
          name="location-o"
          class="mr-[5px]"
        />当前位置：密码管理-修改密码</span
      >
    </div>
    <el-divider />
    <div class="mt-[10px] flex justify-center">
      <el-form
        ref="ruleFormRef"
        style="width: 560px; text-align: center"
        :model="formData"
        :rules="rules"
        label-width="auto"
        size="default"
      >
        <el-form-item
          label="原密码："
          prop="oldPassword"
          placeholder="请输入原密码"
        >
          <el-input
            v-model="formData.oldPassword"
            type="password"
            show-password
          />
        </el-form-item>

        <el-form-item
          label="新密码："
          prop="password"
          placeholder="请输入新密码"
        >
          <el-space fill>
            <el-input
              v-model="formData.password"
              type="password"
              show-password
            />
            <el-alert type="info" :closable="false">
              <span class="text-[8px]">
                密码由8-24位字符组成，区分大小写(至少包含1位特殊字符，不能包含空格)建议使用英文字母加数字或符号的混合密码
              </span>
            </el-alert>
          </el-space>
        </el-form-item>

        <el-form-item
          label="确认新密码："
          prop="confirmPassword"
          placeholder="请输入新密码"
        >
          <el-input
            v-model="formData.confirmPassword"
            type="password"
            show-password
          />
        </el-form-item>

        <el-form-item
          label="验证码："
          prop="verificationCode"
          placeholder="请输入验证码"
        >
          <el-input v-model="formData.verificationCode" />
        </el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认
        </el-button>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules, ElMessage } from "element-plus";
interface RuleForm {
  password: string;
  oldPassword: string;
  confirmPassword: string;
  verificationCode: string;
}

const ruleFormRef = ref<FormInstance>();
const formData = ref<RuleForm>({
  oldPassword: "",
  password: "",
  confirmPassword: "",
  verificationCode: ""
});
const rules = reactive<FormRules<RuleForm>>({
  oldPassword: [
    { required: true, message: "请输入原密码", trigger: "blur" },
    { min: 8, max: 24, message: "长度最小8位最大24位", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 8, max: 24, message: "长度最小8位最大24位", trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, message: "请确认新密码", trigger: "blur" },
    { min: 8, max: 24, message: "长度最小8位最大24位", trigger: "blur" }
  ],
  verificationCode: [
    { required: true, message: "请输入验证码", trigger: "blur" }
  ]
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessage.success("修改成功");
    } else {
      // ElMessage.error("修改失败，请重试");
    }
  });
};
</script>

<style lang="scss" scoped>
.passwordManagement {
  height: 100%;
  background-color: var(--color-main-background-secondary);
  .name {
    color: var(--color-main-text);
  }
}
.el-alert {
  padding: 0 0 0 10px;
}
</style>
